<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>139_文本节点</title>

	</head>
	<body>
		<div id="box1" style="display: none;">我是box1
			<span class="s1">我是span</span>
			<span class="s1">我是span</span>
		</div>

		<script>
			/* 	
				在DOM中，网页中所有的文本内容都是文本节点对象.
				可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做.
				
				我们可以直接通过元素去修改其中的文本
				修改文本的三个属性
					element.textContent 获取或修改元素中的文本内容
						-获取的是标签中的内容，不会考虑css样式(会包含换行，空格)
					element.innerText 获取或修改元素中的文本内容
						-innerText获取内容时，会考虑CSS样式
						-通过innerText去读取CSS样式，会触发网页的重排(计算CSS样式)
						- 当字符串中有标签时，会自动对标签进行转义
						- <li> 会转义成 glt;li8gt;
					element.innerHTML获取或修改元素中的html代码
						可以直接向元素中添加html代码；
						innerHTML插入内容时，有被xss注入的风险；
			 */
			const box1 = document.getElementById("box1")
			let text = box1.firstChild;
			console.log(text);
		</script>
	</body>
</html>